<form nz-form #organizationCreateOrEditForm="ngForm" (ngSubmit)="save()">
    <div class="modal-header">
        <div class="modal-title">
            <i nz-icon nzType="share-alt" class="mr-sm"></i>
            <span *ngIf="organizationUnit.id">{{"Edit" | localize}}: {{organizationUnit.displayName}}</span>
            <span *ngIf="!organizationUnit.id&&!organizationUnit.parentId">{{"NewOrganizationUnit" | localize}}</span>
            <span *ngIf="organizationUnit.parentId&&organizationUnit.parentDisplayName">{{'AddSubNodeForXParentNode' | localize:organizationUnit.parentDisplayName}}</span>
        </div>
    </div>

    <fieldset>
        <nz-form-item nz-row>
            <nz-form-label nzFor="OrganizationUnitDisplayName" nzRequired>
                {{"Name" | localize}}
            </nz-form-label>
            <nz-form-control [nzErrorTip]="dispalyNameValidationTpl" nzHasFeedback>
                <input nz-input #organizationUnitDisplayName="ngModel" name="OrganizationUnitDisplayName" [(ngModel)]="organizationUnit.displayName"
                    placeholder="{{'Name' | localize}}" required maxlength="128">
                <ng-template #dispalyNameValidationTpl let-control>
                    <validation-messages [formCtrl]="control"></validation-messages>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
    </fieldset>

    <div class="modal-footer">
        <button nz-button [nzType]="'default'" type="button" (click)="close($event)" [disabled]="saving">
            {{"Cancel" | localize}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!organizationCreateOrEditForm.form.valid || saving"
            [nzLoading]="saving">
            <i nz-icon nzType="save" *ngIf="!saving"></i> {{"Save" | localize}}
        </button>
    </div>

</form>